<template>
  <div>
    <el-button @click='start' type='primary'>start</el-button>
    <el-card class='card'>
      <el-empty description='暂无查询信息' v-if='!isShow'></el-empty>
      <div id='chart'></div>
    </el-card>

  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'chart4',
  mounted() {
    // this.init()
  },
  data() {
    return {
      isShow: false

    }
  },
  methods: {
    init() {

      // test 对时间点进行排序

      let time = ['05:52:13', '05:51:32', '05:50:51', '05:53:10', '05:55:20', '05:51:56']

      console.log('aa:', this.$dayjs().format('YYYY-MM-DD'))

      time = time.map(item => {
        return Date.parse('2023-02-14 ' + item)
      })

      time = time.sort((x, y) => {
        return x - y
      })

      console.log(time)

      time = time.map(item => {
        return this.$dayjs(item).format('HH:mm:ss')
      })

      console.log('time:', time)

      const chart = this.$echarts.init(document.getElementById('chart'))

      const lenData = ['进行中', '未注册']

      const yAxisData = ['发动机', '测温仪', '刷卡机']

      const timeData = [1651373200, 1651374200, 1651374800, 1651376100, 1651377000, 1651372200, 1651372500, 1651373352, 1651377000, 1651379100, 1651379100, 1651373400, 1651375500, 1651377000, 1651372200, 1651373400, 1651376670]

      let xAxisData = []
      timeData.forEach((item) => {
        // xAxisData.push(dayjs(item * 1000).format('HH:mm:ss'))
        xAxisData.push(item)
      })

      const seriesData = [
        {
          symbolSize: 20,
          name: '进行中',
          data: [
            [1651373200, '发动机'],
            [1651374200, '测温仪'],
            [1651374800, '刷卡机'],
            [1651376100, '刷卡机'],
            [1651377000, '刷卡机'],
            [1651372200, '发动机'],
            [1651372500, '发动机'],
            [1651373352, '发动机'],
            [1651377000, '测温仪'],
            [1651379100, '测温仪'],
            [1651379100, '发动机'],
            [1651373400, '刷卡机'],
            [1651375500, '刷卡机'],
            [1651377000, '测温仪'],
            [1651372200, '刷卡机'],
            [1651373400, '刷卡机'],
            [1651376670, '刷卡机']
          ],
          type: 'scatter'
        },
        {
          symbolSize: 20,
          name: '未注册',
          data: [
            [1651373450, '发动机'],
            [1651374400, '测温仪'],
            [1651375110, '刷卡机']
          ],
          type: 'scatter'
        }
      ]

      console.log('==================')
      console.log('lenData:', lenData)
      console.log('xAxis:', xAxisData)
      console.log('yAxis:', yAxisData)
      console.log('seriesData:', seriesData)

      const option = {
        title: {
          text: 'title',
          left: 5,
          top: 5
        },
        legend: {
          data: lenData,
          orient: 'horizontal',   // 'vertical'
          x: 'center',
          y: 'top'
        },
        // tooltip: {
        //   show: true,
        //   trigger: 'axis',
        //   formatter: function(data) {
        //     console.log(data)
        //     let str = data[0].name + '<br/>'
        //     data.forEach(item => {
        //       str += `${item.marker}${item.axisValue} 在 ${dayjs(item.data[0] * 1000).format('HH:mm:ss')} 上报1次 <br/> `
        //     })
        //     return str
        //   },
        //   axisPointer: { type: 'none' }
        // },
        tooltip: {
          position: 'top',
          formatter: function(params) {
            //   console.log(params)
            return params.name + ' 在 ' + dayjs(params.value[0] * 1000).format('HH:mm:ss') + ' 上报 1 次'
          }
        },
        xAxis: {
          type: 'time',
          data: xAxisData,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisLabel: {
            interval: 'auto'
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: false
          },
          type: 'category',
          // formatter: function(value) {
          //   return ['发动机', '测温仪', '刷卡机']
          // },
          data: yAxisData,
          axisTick: {
            show: true
          },
          axisLine: {
            show: true
          }
        },
        series: seriesData,
        dataZoom: [{
          type: 'slider',//图表下方的伸缩条
          show: true, //是否显示
          yAxisIndex: [0],
          realtime: true, //拖动时，是否实时更新系列的视图
          start: 0, //伸缩条开始位置（1-100），可以随时更改
          end: 100, //伸缩条结束位置（1-100），可以随时更改
          showDetail: false,
          showDataShadow: false,
          right: 0,
          backgroundColor: '#dddddd'
        }, {
          type: 'inside',
          xAxisIndex: [0],
          start: 0, //伸缩条开始位置（1-100），可以随时更改
          end: 100 //伸缩条结束位置（1-100），可以随时更改
        }]
      }
      chart.setOption(option)
      window.addEventListener('resize', function() {
        chart.resize()
      })

      this.isShow = true

      // 修改容器的大小
      let w = document.documentElement.clientWidth
      let h = document.documentElement.clientHeight

      console.log('width:', w, '  height:', h)


    },
    start() {
      this.init()


    }

  }
}
</script>

<style scoped>
#chart {
  width: 70%;
  height: 300px;
  margin: auto;
}

.el-button {
  margin-bottom: 20px;
}

.card {
  width: 100%;
  margin: auto;
}
</style>